<!--
 * @Author: Orginly
 * @Date: 2020-10-26 20:33:20
 * @LastEditors: Orginly
 * @LastEditTime: 2020-10-26 20:35:07
-->
<template>
	<view class="grace-order" :style="bodyShow == true ? '' : 'padding-bottom: 0'">
		<view class="grace-space-between grace-flex-vcenter" v-if="title || titleRight">
			<text v-if="title">{{ title }}</text>
			<text v-if="titleRight">{{ titleRight }}</text>
		</view>
		<!-- 头部插槽 -->
		<view v-if="headerShow" class="king-card-header"
		 :style="!hearderBottomMargin ? 'padding-bottom:0;;margin-bottom:0' : ''"
         :class="{'king-border':borderShow}">
			<slot name="header"></slot>
		</view>
		<!-- 内容 -->
		<slot name="body"></slot>
	</view>
</template>

<script>
	export default{
		props:{
			title:String,      
			titleRight:String,
			borderShow:{
				type:Boolean,
				default:true
			},
			headerShow:{
				type:Boolean,
				default:true
			},
			hearderBottomMargin:{
				type:Boolean,
				default:true
			},
			bodyShow:{
				type:Boolean,
				default:true
			},
		}
	}
</script>

<style scoped>
	.grace-order {
		background-color: #ffffff;
		margin-bottom: 20rpx;
		padding: 30rpx 30rpx 12rpx;
	}
	.king-card-header{
		padding: 0rpx 4rpx 26rpx;
		margin-bottom: 20rpx;
	}
	.king-border{
		border-bottom: 1px solid #CCCCCC;
	}

</style>